<template>
    <div class="wrapper" id="wrapper">
        <SketchRule :lang="lang" :thick="thick" :scale="scale" :width="width" :height="height" :startX="startX"
            :startY="startY" :shadow="shadow" :horLineArr="lines.h" :verLineArr="lines.v" :cornerActive="true"
            @handleLine="handleLine" @onCornerClick="handleCornerClick" />
        <div ref="screensRef" id="screens" @wheel="handleWheel" @scroll="handleScroll">
            <div ref="containerRef" class="screen-container">
                <div id="canvas" :style="canvasStyle" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import SketchRule from "vue-sketch-ruler";

const rectWidth = 960;
const rectHeight = 720;

// 响应式变量
const scale = ref(1);
const startX = ref(0);
const startY = ref(0);
const lines = ref({
    h: [100, 200],
    v: [100, 200]
});
const thick = ref(20);
const width = ref(500);
const height = ref(400);
const lang = ref("zh-CN");
const screensRef = ref(null);
const containerRef = ref(null);

// 计算属性
const shadow = computed(() => ({
    x: 0,
    y: 0,
    width: rectWidth,
    height: rectHeight
}));

const canvasStyle = computed(() => ({
    width: `${rectWidth}px`,
    height: `${rectHeight}px`,
    transform: `scale(${scale.value})`
}));

// 方法
const handleLine = (newLines) => {
    lines.value = newLines;
};

const handleCornerClick = () => {
    // 空实现，保持原有行为
};

const handleScroll = () => {
    const screensRect = document.querySelector("#screens").getBoundingClientRect();
    const canvasRect = document.querySelector("#canvas").getBoundingClientRect();

    // 计算标尺开始的刻度
    const calculatedStartX = (screensRect.left + thick.value - canvasRect.left) / scale.value;
    const calculatedStartY = (screensRect.top + thick.value - canvasRect.top) / scale.value;

    startX.value = Math.floor(calculatedStartX);
    startY.value = Math.floor(calculatedStartY);
};

const handleWheel = (e) => {
    if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        const nextScale = parseFloat(
            Math.max(0.2, scale.value - e.deltaY / 500).toFixed(2)
        );
        scale.value = nextScale;
    }
    nextTick(() => {
        handleScroll();
    });
};

const initSize = () => {
    const wrapperRect = document.querySelector("#wrapper").getBoundingClientRect();
    const borderWidth = 1;
    width.value = wrapperRect.width - thick.value - borderWidth;
    height.value = wrapperRect.height - thick.value - borderWidth;
};

// 生命周期
onMounted(() => {
    // 滚动居中
    if (screensRef.value && containerRef.value) {
        screensRef.value.scrollLeft =
            containerRef.value.getBoundingClientRect().width / 2 - 300; // 300 = #screens.width / 2
    }

    nextTick(() => {
        initSize();
    });
});
</script>

<style>
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    overflow: hidden;
}

body * {
    box-sizing: border-box;
    user-select: none;
}

.wrapper {
    background-color: #f5f5f5;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 900px;
    height: 700px;
    border: 1px solid #DADADC;
}

#screens {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.screen-container {
    position: absolute;
    width: 5000px;
    height: 3000px;
}

.scale-value {
    position: absolute;
    left: 0;
    bottom: 100%;
}

.button {
    position: absolute;
    left: 100px;
    bottom: 100%;
}

.button-ch {
    position: absolute;
    left: 200px;
    bottom: 100%;
}

.button-en {
    position: absolute;
    left: 230px;
    bottom: 100%;
}

#canvas {
    position: absolute;
    top: 80px;
    left: 50%;
    margin-left: -80px;
    width: 160px;
    height: 200px;
    background: lightblue;
    transform-origin: 50% 0;
}
</style>
